<template>
  <div class="industry-insight-container">
    <!-- 顶部标题和筛选 -->
    <div class="header-section">
      <div class="title-area">
        <h1>
          <el-icon><DataAnalysis /></el-icon>
          行业洞察分析
        </h1>
        <p class="subtitle">行业趋势与竞品动态深度分析</p>
      </div>
      <div class="filter-area">
        <el-form :inline="true" :model="filterForm" class="modern-filter">
          <el-form-item>
            <el-select
              v-model="filterForm.industry"
              placeholder="选择行业"
              class="modern-select"
              clearable
            >
              <el-option label="电子商务" value="ecommerce" />
              <el-option label="金融服务" value="finance" />
              <el-option label="教育培训" value="education" />
              <el-option label="医疗健康" value="healthcare" />
              <el-option label="人工智能" value="ai" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              class="modern-date-picker"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter" class="action-button">
              <el-icon><Search /></el-icon>
              分析
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="kpi-section">
      <div class="kpi-card primary">
        <div class="kpi-content">
          <div class="kpi-icon">
            <el-icon><TrendCharts /></el-icon>
          </div>
          <div class="kpi-text">
            <div class="kpi-title">行业增长率</div>
            <div class="kpi-value">12.8%</div>
            <div class="kpi-trend up">
              <el-icon><Top /></el-icon>
              2.1%
            </div>
          </div>
        </div>
      </div>

      <div class="kpi-card warning">
        <div class="kpi-content">
          <div class="kpi-icon">
            <el-icon><PieChart /></el-icon>
          </div>
          <div class="kpi-text">
            <div class="kpi-title">市场份额</div>
            <div class="kpi-value">23.5%</div>
            <div class="kpi-trend down">
              <el-icon><Bottom /></el-icon>
              1.3%
            </div>
          </div>
        </div>
      </div>

      <div class="kpi-card success">
        <div class="kpi-content">
          <div class="kpi-icon">
            <el-icon><ChatLineRound /></el-icon>
          </div>
          <div class="kpi-text">
            <div class="kpi-title">舆论声量</div>
            <div class="kpi-value">8,742</div>
            <div class="kpi-trend up">
              <el-icon><Top /></el-icon>
              15.7%
            </div>
          </div>
        </div>
      </div>

      <div class="kpi-card danger">
        <div class="kpi-content">
          <div class="kpi-icon">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="kpi-text">
            <div class="kpi-title">负面舆情</div>
            <div class="kpi-value">328</div>
            <div class="kpi-trend down">
              <el-icon><Bottom /></el-icon>
              8.3%
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要分析区域 -->
    <div class="analysis-section">
      <!-- 竞品对比分析 -->
      <div class="section-card">
        <div class="section-header">
          <h2>
            <el-icon><Compare /></el-icon>
            竞品对比分析
          </h2>
          <div class="section-actions">
            <el-select v-model="competitorSelection" multiple placeholder="选择竞品">
              <el-option
                v-for="item in competitorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>

        <div class="analysis-row">
          <div class="chart-card">
            <div class="chart-header">
              <h3>
                <el-icon><Histogram /></el-icon>
                市场份额对比
              </h3>
            </div>
            <div id="marketShareChart" class="chart-container"></div>
          </div>

          <div class="chart-card">
            <div class="chart-header">
              <h3>
                <el-icon><DataLine /></el-icon>
                用户增长率对比
              </h3>
            </div>
            <div id="growthRateChart" class="chart-container"></div>
          </div>
        </div>
      </div>

      <!-- 舆论爆发点检测 -->
      <div class="section-card">
        <div class="section-header">
          <h2>
            <el-icon><Opportunity /></el-icon>
            舆论爆发点检测
          </h2>
          <div class="section-actions">
            <el-select v-model="sentimentType" placeholder="情感类型">
              <el-option label="全部" value="all" />
              <el-option label="正面" value="positive" />
              <el-option label="中性" value="neutral" />
              <el-option label="负面" value="negative" />
            </el-select>
          </div>
        </div>

        <div class="analysis-row">
          <div class="chart-card full-width">
            <div class="chart-header">
              <h3>
                <el-icon><Bell /></el-icon>
                舆论声量趋势与爆发点
              </h3>
            </div>
            <div id="sentimentTrendChart" class="chart-container"></div>
          </div>
        </div>

        <div class="analysis-row">
          <div class="chart-card">
            <div class="chart-header">
              <h3>
                <el-icon><PieChart /></el-icon>
                舆论情感分布
              </h3>
            </div>
            <div id="sentimentPieChart" class="chart-container"></div>
          </div>

          <div class="chart-card">
            <div class="chart-header">
              <h3>
                <el-icon><HotWater /></el-icon>
                热点话题词云
              </h3>
            </div>
            <div id="wordCloudChart" class="chart-container"></div>
          </div>
        </div>
      </div>

      <!-- 热门话题列表 -->
      <div class="section-card">
        <div class="section-header">
          <h2>
            <el-icon><List /></el-icon>
            热门话题TOP10
          </h2>
          <el-button type="primary" text>
            查看更多
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>

        <el-table :data="hotTopics" style="width: 100%">
          <el-table-column prop="rank" label="排名" width="80" />
          <el-table-column prop="topic" label="话题" />
          <el-table-column prop="volume" label="声量" width="120" />
          <el-table-column prop="growth" label="增长率" width="120">
            <template #default="{ row }">
              <el-tag :type="row.growth >= 0 ? 'success' : 'danger'" size="small">
                {{ row.growth >= 0 ? "+" : "" }}{{ row.growth }}%
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sentiment" label="情感倾向" width="120">
            <template #default="{ row }">
              <el-tag :type="getSentimentType(row.sentiment)" size="small">
                {{ row.sentiment }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template #default>
              <el-button link type="primary" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-wordcloud";

// 筛选表单
const filterForm = ref({
  industry: "",
  dateRange: ["", ""],
});

const competitorSelection = ref(["comp1", "comp2", "comp3"]);
const competitorOptions = [
  { value: "comp1", label: "竞品A" },
  { value: "comp2", label: "竞品B" },
  { value: "comp3", label: "竞品C" },
  { value: "comp4", label: "竞品D" },
  { value: "comp5", label: "竞品E" },
];

const sentimentType = ref("all");

// 热门话题数据
const hotTopics = ref([
  { rank: 1, topic: "行业新规发布对市场的影响", volume: 12500, growth: 45.3, sentiment: "中性" },
  { rank: 2, topic: "竞品A最新产品发布", volume: 9820, growth: 78.2, sentiment: "正面" },
  { rank: 3, topic: "数据隐私安全问题", volume: 8760, growth: 32.1, sentiment: "负面" },
  { rank: 4, topic: "行业峰会最新观点", volume: 7540, growth: 12.5, sentiment: "中性" },
  { rank: 5, topic: "供应链问题导致价格上涨", volume: 6320, growth: -5.3, sentiment: "负面" },
  { rank: 6, topic: "新兴技术应用案例", volume: 5870, growth: 23.7, sentiment: "正面" },
  { rank: 7, topic: "行业人才争夺战", volume: 4320, growth: 8.9, sentiment: "中性" },
  { rank: 8, topic: "可持续发展倡议", volume: 3980, growth: 15.2, sentiment: "正面" },
  { rank: 9, topic: "消费者投诉集中问题", volume: 3650, growth: -2.1, sentiment: "负面" },
  { rank: 10, topic: "跨界合作新动态", volume: 3210, growth: 42.8, sentiment: "正面" },
]);

// 处理筛选
const handleFilter = () => {
  initCharts();
};

// 获取情感标签类型
const getSentimentType = (sentiment: string) => {
  switch (sentiment) {
    case "正面":
      return "success";
    case "负面":
      return "danger";
    default:
      return "info";
  }
};

// 初始化所有图表
const initCharts = () => {
  initMarketShareChart();
  initGrowthRateChart();
  initSentimentTrendChart();
  initSentimentPieChart();
  initWordCloudChart();
};

// 1. 市场份额对比图
const initMarketShareChart = () => {
  const chart = echarts.init(document.getElementById("marketShareChart"));

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["当前季度", "上一季度"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}%",
      },
    },
    yAxis: {
      type: "category",
      data: ["竞品A", "竞品B", "竞品C", "竞品D", "本产品"],
    },
    series: [
      {
        name: "当前季度",
        type: "bar",
        data: [18.3, 15.7, 12.2, 9.8, 23.5],
        itemStyle: {
          color: "#3a8ee6",
          borderRadius: [0, 4, 4, 0],
        },
        label: {
          show: true,
          position: "right",
          formatter: "{c}%",
        },
      },
      {
        name: "上一季度",
        type: "bar",
        data: [17.5, 14.9, 11.8, 10.2, 22.1],
        itemStyle: {
          color: "#a0cfff",
          borderRadius: [0, 4, 4, 0],
        },
        label: {
          show: true,
          position: "right",
          formatter: "{c}%",
        },
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 2. 用户增长率对比图
const initGrowthRateChart = () => {
  const chart = echarts.init(document.getElementById("growthRateChart"));

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    legend: {
      data: ["竞品A", "竞品B", "竞品C", "本产品"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          formatter: "{value}%",
        },
      },
    ],
    series: [
      {
        name: "竞品A",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 3,
          color: "#f56c6c",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(245, 108, 108, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(245, 108, 108, 0.1)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [3.2, 4.1, 5.6, 7.2, 8.9, 10.3, 12.1],
      },
      {
        name: "竞品B",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 3,
          color: "#e6a23c",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(230, 162, 60, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(230, 162, 60, 0.1)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [2.8, 3.5, 4.2, 5.1, 6.3, 7.8, 9.2],
      },
      {
        name: "竞品C",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 3,
          color: "#67c23a",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(103, 194, 58, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(103, 194, 58, 0.1)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [4.1, 5.3, 6.7, 8.2, 9.5, 11.2, 13.8],
      },
      {
        name: "本产品",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 3,
          color: "#3a8ee6",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(58, 142, 230, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(58, 142, 230, 0.1)",
            },
          ]),
        },
        emphasis: {
          focus: "series",
        },
        data: [5.2, 6.8, 8.3, 10.1, 12.7, 15.3, 18.2],
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 3. 舆论声量趋势与爆发点图
const initSentimentTrendChart = () => {
  const chart = echarts.init(document.getElementById("sentimentTrendChart"));

  const data = [
    ["2023-01-01", 120, 0],
    ["2023-01-02", 132, 0],
    ["2023-01-03", 101, 0],
    ["2023-01-04", 134, 0],
    ["2023-01-05", 290, 1], // 爆发点
    ["2023-01-06", 230, 0],
    ["2023-01-07", 210, 0],
    ["2023-01-08", 182, 0],
    ["2023-01-09", 191, 0],
    ["2023-01-10", 234, 0],
    ["2023-01-11", 490, 1], // 爆发点
    ["2023-01-12", 330, 0],
    ["2023-01-13", 310, 0],
    ["2023-01-14", 432, 0],
    ["2023-01-15", 520, 1], // 爆发点
    ["2023-01-16", 350, 0],
    ["2023-01-17", 320, 0],
    ["2023-01-18", 380, 0],
    ["2023-01-19", 410, 0],
    ["2023-01-20", 280, 0],
  ];

  const markPoints = data
    .filter((item) => item[2] === 1)
    .map((item) => {
      return {
        name: "舆论爆发点",
        coord: [item[0], item[1]],
        value: "舆论爆发",
        symbol: "circle",
        symbolSize: 12,
        itemStyle: {
          color: "#f56c6c",
        },
        label: {
          formatter: "爆发点",
          color: "#fff",
          backgroundColor: "#f56c6c",
          padding: [2, 4],
          borderRadius: 4,
        },
      };
    });

  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.map((item) => item[0]),
    },
    yAxis: {
      type: "value",
      name: "声量",
    },
    series: [
      {
        name: "舆论声量",
        type: "line",
        smooth: true,
        lineStyle: {
          width: 3,
          color: "#3a8ee6",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(58, 142, 230, 0.3)",
            },
            {
              offset: 1,
              color: "rgba(58, 142, 230, 0.1)",
            },
          ]),
        },
        markPoint: {
          data: markPoints,
        },
        data: data.map((item) => item[1]),
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 4. 舆论情感分布图
const initSentimentPieChart = () => {
  const chart = echarts.init(document.getElementById("sentimentPieChart"));

  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      right: 10,
      top: "center",
      data: ["正面", "中性", "负面"],
    },
    series: [
      {
        name: "情感分布",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "18",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "正面", itemStyle: { color: "#67c23a" } },
          { value: 735, name: "中性", itemStyle: { color: "#e6a23c" } },
          { value: 328, name: "负面", itemStyle: { color: "#f56c6c" } },
        ],
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

// 5. 热点话题词云图
const initWordCloudChart = () => {
  const chart = echarts.init(document.getElementById("wordCloudChart"));

  const words = [
    { name: "数字化转型", value: 10000 },
    { name: "人工智能", value: 8000 },
    { name: "数据安全", value: 7500 },
    { name: "用户体验", value: 7000 },
    { name: "云计算", value: 6500 },
    { name: "行业标准", value: 6000 },
    { name: "市场竞争", value: 5500 },
    { name: "创新技术", value: 5000 },
    { name: "可持续发展", value: 4500 },
    { name: "人才培养", value: 4000 },
    { name: "产品迭代", value: 3500 },
    { name: "客户服务", value: 3000 },
    { name: "商业模式", value: 2500 },
    { name: "政策监管", value: 2000 },
    { name: "供应链", value: 1500 },
  ];

  const option = {
    tooltip: {
      show: true,
      formatter: function (params: any) {
        return params.name + ": " + params.value;
      },
    },
    series: [
      {
        type: "wordCloud",
        shape: "circle",
        left: "center",
        top: "center",
        width: "90%",
        height: "90%",
        right: null,
        bottom: null,
        sizeRange: [12, 40],
        rotationRange: [-45, 45],
        rotationStep: 15,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          fontFamily: "sans-serif",
          fontWeight: "bold",
          color: function () {
            return (
              "rgb(" +
              [
                Math.round(Math.random() * 160 + 50),
                Math.round(Math.random() * 160 + 50),
                Math.round(Math.random() * 160 + 50),
              ].join(",") +
              ")"
            );
          },
        },
        emphasis: {
          focus: "self",
          textStyle: {
            shadowBlur: 10,
            shadowColor: "#333",
          },
        },
        data: words,
      },
    ],
  };

  chart.setOption(option);
  window.addEventListener("resize", () => chart.resize());
};

onMounted(() => {
  initCharts();
});
</script>

<style lang="scss" scoped>
.industry-insight-container {
  padding: 24px;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;

  .title-area {
    h1 {
      margin: 0;
      font-size: 24px;
      font-weight: 600;
      color: #1f2d3d;
      display: flex;
      align-items: center;

      .el-icon {
        margin-right: 10px;
        font-size: 28px;
        color: #3a8ee6;
      }
    }

    .subtitle {
      margin: 4px 0 0;
      font-size: 14px;
      color: #8492a6;
    }
  }

  .modern-filter {
    .el-form-item {
      margin-bottom: 0;
      margin-right: 12px;
    }

    .modern-date-picker {
      width: 240px;
    }

    .modern-select {
      width: 160px;
    }

    .action-button {
      padding: 9px 16px;
      border-radius: 8px;
      font-weight: 500;

      .el-icon {
        margin-right: 6px;
      }
    }
  }
}

.kpi-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;

  .kpi-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    &.primary {
      border-left: 4px solid #3a8ee6;
    }

    &.warning {
      border-left: 4px solid #e6a23c;
    }

    &.success {
      border-left: 4px solid #67c23a;
    }

    &.danger {
      border-left: 4px solid #f56c6c;
    }

    .kpi-content {
      display: flex;
      align-items: center;

      .kpi-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        flex-shrink: 0;

        .el-icon {
          font-size: 24px;
          color: #fff;
        }
      }

      .primary & .kpi-icon {
        background: linear-gradient(135deg, #3a8ee6, #6ab0f3);
      }

      .warning & .kpi-icon {
        background: linear-gradient(135deg, #e6a23c, #eebe77);
      }

      .success & .kpi-icon {
        background: linear-gradient(135deg, #67c23a, #95d475);
      }

      .danger & .kpi-icon {
        background: linear-gradient(135deg, #f56c6c, #f89898);
      }

      .kpi-text {
        flex: 1;

        .kpi-title {
          font-size: 14px;
          color: #8492a6;
          margin-bottom: 4px;
        }

        .kpi-value {
          font-size: 24px;
          font-weight: 600;
          color: #1f2d3d;
          margin-bottom: 4px;
        }

        .kpi-trend {
          font-size: 12px;
          display: flex;
          align-items: center;

          .el-icon {
            margin-right: 4px;
            font-size: 12px;
          }

          &.up {
            color: #67c23a;
          }

          &.down {
            color: #f56c6c;
          }
        }
      }
    }
  }
}

.analysis-section {
  .section-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #1f2d3d;
        display: flex;
        align-items: center;

        .el-icon {
          margin-right: 8px;
          color: #3a8ee6;
        }
      }

      .section-actions {
        .el-select {
          width: 180px;
        }
      }
    }

    .analysis-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-bottom: 16px;

      .full-width {
        grid-column: 1 / -1;
      }
    }

    .chart-card {
      background: #fff;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

      .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        h3 {
          margin: 0;
          font-size: 15px;
          font-weight: 500;
          color: #1f2d3d;
          display: flex;
          align-items: center;

          .el-icon {
            margin-right: 8px;
            color: #3a8ee6;
          }
        }
      }

      .chart-container {
        height: 300px;
      }
    }
  }
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
</style>
